\chapter{Estudi de les libreries d'Interfície d'Usuari a Java}

\section{Introducció}
Durant el desenvolupament d’aquest projecte s’han implementat diversos
adaptadors per algunes de les llibreries gràfiques més comunes de Java. La
solució esta dissenyada de manera que es pugui extendre fàcilment per a poder
suportar altres llibreries, mitjançant les interficies
corresponents.\\

A continuació s’expliquen les llibreries que s’han implementat acompanyades
cadascuna d'una o més imatges característiques de cada llibreria.\\

\section{SWT}
\emph{Standard Widget Toolkit}\footnote{SWT - http://www.eclipse.org/swt/} o SWT
és la llibreria gràfica que ha adoptat el projecte Eclipse i és, conseqüentment, un dels pilars d'aquest framework.\\
El propòsit de SWT és oferir una API amb un bon rendiment un una aparença
coherent amb el sistema operatiu sota el que s'està executant. Per assolir
aquesta fita en comptes d'implementar tota una llibreria gràfica des de zero amb
Java, aquesta llibreria fa un \emph{wrapping} sobre les llibreries natives del
sistema.\\

La seva última versió és la 3.6 (la mateixa que Eclipse).\\

\textbf{Avantatges i inconvenients}\\
El fet que SWT utilitzi les llibreries gràfiques que ofereix el sistema
operatiu porta un seguit d'avantatges però també inconvenients respecte
a una llibreria completament implementada en Java. El principal avantatge és que
obviament l'usuari no pot distingir entre els elements del seu sistema dels
d'una aplicació SWT. Així la coherència, cohesió i funcionament similars als que
l'usuari espera. A més a més se suposa que les llibreries gràfiques natives
estàn molt optimitzades i ofereixen menys sobrecàrrega al sistema respecte a
qualsevol implementació Java. Gràcies a això SWT presumeix (tot i que sense
una base massa sòlida de proves) ser la llibreria gràfica Java amb millor
rendiment i menys impacte en els recursos del sistema.\\

Les desavantatges són diverses: es necessita una llibreria dependendent de la
plataforma: el \emph{wrapper}. Actualment la llibreria està disponible per a
Motif\footnote{Motif - http://es.wikipedia.org/wiki/Motif},
GTK+\footnote{GTK+ - http://www.gtk.org/},
GDI\footnote{GDI - http://msdn.microsoft.com/en-us/library/dd145203(VS.85).aspx}
(Windows) i Carbon\footnote{Carbon - http://es.wikipedia.org/wiki/Carbon\_(API)}
(Mac) principalment. Tot i que la llibreria està disponible per a la majoria de plataformes que hi ha actualment es fa necesari recalcar que es requerirà d'un desplegament diferent per a cadascuna d'elles, trencant així (tot i que només en part) un dels principals avantatges de Java: la multiplataforma.\\

A més a més hi ha una desavantatge que no és evident a primer cop d'ull: degut a
que SWT delega el pes de la implementació a les llibreries natives del sistema
existeix el risc que algunes de les seves funcionalitats no estiguin
disponibles o que ho estiguin tan sols per a determinades
plataformes, amb el que no es tindria forma de saber si els canvis realitzats a la interfície realment
arriben a l'usuari del sistema o no, complicant la tasca d'anàlisi de resultats.

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/swt-xp.png}
\caption{SWT sota Windows XP}
\end{figure}

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/swt-vista.png}
\caption{SWT sota Windows Vista}
\end{figure}

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/swt-macosx.png}
\caption{SWT sota Mac OS X}
\end{figure}

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/swt-gtk.png}
\caption{SWT sota GTK}
\end{figure}

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/swt-motif.png}
\caption{SWT sota Motif}
\end{figure}

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/swt-photon.png}
\caption{SWT sota Photon}
\end{figure}


\section{AWT}
\emph{Abstract Window Toolkit}\footnote{AWT - http://es.wikipedia.org/wiki/Awt}
o AWT és una llibreria implementada íntegrament en Java que ofereix funcionalitats de finestra,
\emph{widgets}\footnote{Widget - http://es.wikipedia.org/wiki/Widget} (elements
de la interfície gràfica) i gràfics (dibuixat de formes simples, com punts, línies, \ldots). Aquesta llibreria és universal a Java, això significa que allí on tinguem una
màquina virtual J2SE podrem fer funcionar aquesta llibreria. A més a més, segons
Wikipedia[REF correu], els perfils CDC requereixen que la màquina virtual J2ME
inclogui AWT. Això és una molt bona notícia per la part de la solució mòbil del
projecte.\\

AWT consta de dues parts ben diferenciades: una part que s'encarrega
d'administrar les finestres, així com events i \emph{layout
managers}\footnote{Layout manager -
http://en.wikipedia.org/wiki/Layout\_manager}. Aquesta és la part bàsica i tant
Swing com Java2D es recolzen en aquesta part d'AWT a les seves implementacions.
L'altra part consisteix en un conjunt de widgets bàsics així com un canvas (un canvas és, explicat breument, un element al que s'accedeix i es dibuixa dins seu com si es tractés d'un
\emph{framebuffer}\footnote{Framebuffer -
http://en.wikipedia.org/wiki/Framebuffer}), sobre el qual poden dibuixar altres llibreries.\\ Com que es distribueix juntament amb la màquina virtual, la versió oficial de
AWT és la 6 (perquè l'última versió oficial estable de Java és la 6).\\

\textbf{Avantatges i inconvenients}\\
Al igual que SWT, AWT també es nodreix de la llibreria gràfica nativa per a
generar els widgets. No obstant manca del principal punt feble de SWT (la
pèrdua del compromís de multiplataforma que ofereix Java) al delegar aquesta
funció, ja que hem de recordar que AWT s'inclou amb qualsevol màquina virtual
J2SE des de la primera versió de Java, l'any 1995. De manera que a qualsevol
màquina que puguem utilitzar J2SE tindrem aquesta llibreria disponible. El
rendiment d'AWT és també molt alt. Un altre avantatge és la mimetització amb la
resta de les aplicacions del sistema, exactament igual que amb el cas de SWT.
D'altra banda, AWT no careix de desavantatges. La principal és que executant el
mateix codi, el mateix programa oferirà diferents presentacions segons la
plataforma sota la que s'estigui executant. A més a més probablement també
tinguem el mateix problema que SWT, de no poder assegurar que els canvis sobre
la interfície s'hagin aplicat en una plataforma concreta.

\section{Swing}
\emph{Swing}, com AWT, forma part del
JFC\footnote{JFC - http://java.sun.com/products/jfc/reference/faqs/index.html}
(Java Foundation Classes), això vol dir que podem trobar-lo a qualsevol màquina virtual capaç de fer anar codi J2SE (Swing és part de JFC des de Java 1.2). No s'ha de prendre Swing com un reemplaçament
de la llibreria AWT, sino com una extensió del mateix. De fet Swing utilitza els
components bàsics d'AWT per manegar finestres i demés. També cal dir que els
widgets de Swing i els d'AWT tenen una API força semblant. Swing consisteix en
un conjunt de widgets que es dibuixen de forma nativa a Java (això és sense
dependre de cap llibreria nativa del sistema) mitjançant
Java2D\footnote{Java2D - http://java.sun.com/products/java-media/2D/index.jsp},
el qual també forma part de JFC.\\

 \textbf{Avantatges i inconvenients}\\
 Els avantatges són clars: es disposa de Swing en pràcticament qualsevol màquina
 que pugui fer anar codi J2SE (perquè, tal com hem dit abans, forma part de JFC
 des de Java 1.2), qualsevol aplicació que utilitzi Swing a una interfície
 gràfica tindrà exactament la mateixa aparença a totes les plataformes (sempre
 i quan no s'indiqui a Swing que intenti emular el \emph{look and feel}
 de la plataforma nativa).\\
 Dins els inconvenients tenim que, al renderitzar-se íntegrament des de Java és
 una mica més pesat que les alternatives oferides per AWT i SWT, no obstant
 disposa d'un conjunt de widgets standard que sabem que es comportaran de la
 mateixa manera a qualsevol plataforma.


\section{LCDUI}
\emph{Limited Capability Device User Interface} o LCDUI\footnote{LCDUI -
http://library.forum.nokia.com/index.jsp?topic=/Java\_Developers\_Library/GUID-0C6992B9-D044-48E2-8079-BD770E09010A.html}
és la llibreria gràfica oficial de la versió Mobile de la plataforma Java, J2ME. Actualment en la versió 2.5.2.\\

El concepte d’IU d’aquesta llibreria és força senzill: divideix la pantalla en
dos parts, la part on es mostren els controls implementats pel programador,
independents del dispositiu i una altra part on es mostren les accions que el
programador desitgi, aquestes sí dependents del dispositiu on es mostren, que
mapejen les tecles del dispositiu.\\

No permet més d’una pantalla activa en un moment donat, degut a les limitacions
del harware on s’executen les aplicacions J2ME.\\

\textbf{Avantatges i inconvenients}\\
Els avantatges principals de LCDUI són disposar d’una API força lleugera per al
dispositiu i que els seus controls són renderitzats per la màquina virtual i per
tant funcionaran igual en qualsevol sistema operatiu. En cas de que la
funcionalitat de l’interficie sigui senzilla és la millor opció a triar.\\

L’inconvenient és que s’ha quedat desfassada ja que els dispositius per als
quals es va dissenyar han evolucionat moltíssim i les limitacions que els
dissenyadors van posar-hi passen factura a les necessitats actuals. Tampoc
soporta temes\footnote{Tema - http://es.wikipedia.org/wiki/Skin\_(software)}
i és el progrmador qui ha de portar la gestió de colors de cada pantalla i els seus controls.\\

A més l’API al ser tan lleugera és també molt limitada ja que per exemple no hi
ha tractament d’events per als widgets, només per als Canvas. Això fa que si es
necessita accedir a events com ara el generat al pitjar una tecla que no esta
soportada per la llibreria s’ha de programar el widget mitjançant programació de
baix nivell via la clase Canvas.

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/lcdui_1.jpg}
\caption{Exemple d'interfície feta en LCDUI}
\end{figure}

\section{LWUIT}
\emph{Light Weight User Interface Toolkit} o LWUIT\footnote{LWUIT -
http://en.wikipedia.org/wiki/Lightweight\_User\_Interface\_Toolkit} és una
alternativa de llibreria gràfica per J2ME. No és distribuida amb el Toolkit de J2ME per temes de compatibilitat però aquesta suporta i esta dissenyada per funcionar sobre MIDP
2.0 i CLDC 1.1 així com a les plataformes CDC. Per aquest motiu es pot
descarregar i importar-se al projecte MIDLET sense cap complicació.\\

LWUIT proporciona una API potser no tan lleugera com la de LCDUI però molt més
senzilla d’entendre per al programador, amb moltes més funcionalitats i basada
en Swing. Gràcies a aquesta semblança LWUIT incorpora tot un sistema d’events
per als widgets, permetent-los-hi accedir en qualsevol moment a qualsevol event
generat per l’usuari com si d’una aplicació d’escriptori es tractés.\\

Gràcies a això ja no fa falta l’ús de la programació a nivell de pintat manual
en comparació amb el LCDUI.\\

La majoria d'aplicacions basades en J2ME que hi ha actualment al mercat
utilitzen LWUIT per a l’interficie gràfica ja que les aplicacions fetes en un
dispositiu en concret tenen el mateix emph{look`\&'feel} en un altre dispositiu
sense necessitat de tocar el codi gràcies a l’us dels dels temes.\\

\textbf{Avantatges i inconvenients}\\
Avantatges:\\
\begin{itemize}
  \item Tot el sistema d’events
  \item Molt familiar per al programador al ser molt similar amb altres
  llibreries gràfiques de la versió J2SE
   \item Permet l’ús de temes
\end{itemize}

Inconvenients:\\

\begin{itemize}
  \item En uns dos anys o tres, ha quedat desplaçada degut a l’alta capacitat
  computacional del hardware actual, que porten sistemes operatius que suporten
  la versió J2SE. Per exemple els terminals amb Android\footnote{Android -
  http://www.android.com/} o Windows Mobile Edition\footnote{Windows ME -
  http://en.wikipedia.org/wiki/Windows\_Mobile}
  \item Que no vingui empaquetada amb la versió oficial de llibreries de J2ME 
\end{itemize}

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/lwuit_2.jpg}
\caption{Exemple de LWUIT}
\end{figure}

\begin{figure}[H]
\centering
\includegraphics[width=0.3\textwidth]{imatges/chapter08/lwuit_xgl.png}
\caption{Exemple de LWUIT amb suport 3D}
\end{figure}

\begin{figure}[H]
\centering
\includegraphics[width=0.4\textwidth]{imatges/chapter08/LCDUI_VS_LWUIT.png}
\caption{Comparació de la mateixa IU amb LCDUI (A) i LWUIT (B)}
\end{figure}

\section{Estudi de les capacitats d'adaptació de les llibreries}
Per tal d'estudiar les capacitats d'adaptació de les llibreries mencionades
anteriorment s'han seleccionat els elements més habituals a una interfície
d'usuari, i s'ha buscat per cada llibreria gràfica en concret un widget que les
representi. Seguidament s'ha seleccionat un conjunt de canvis a fer a l'element,
que són els que es pretén que el sistema acabi suportant.\\

En concret s'han buscat les següents característiques en els elements:\\

\begin{itemize}
  \item Canvi de tamany
  \item Canvi del color dibuixat (foreground)
  \item Canvi del color de fons (background)
  \item Canvi de font (només per als elements que renderitzin text)
\end{itemize}

Es proposen doncs, dues taules per a cada element estudiat: La primera taula
especificarà quin widget en concret s'ha estudiat per a cada llibreria. La
segona taula indica quines de les característiques anteriorment llistades
ofereix cada widget.

\subsection{Text simple}
Un element que mostra text simple. Pot respondre a accions de l'usuari, però no
té perquè.\\

\textbf{Widgets candidats:}\\

\begin{tabular}{|l|r|}
\hline
SWT & Label\\\hline
AWT & Label\\\hline
Swing & JLabel\\\hline
LCDUI & StringItem\\\hline
LWUIT & Label\\\hline
\end{tabular}
\\
\\
\textbf{Suport a les llibreries:}\\

\begin{tabular}{|l||c|c|c|c|r|}
\hline
 & \textbf{AWT} & \textbf{SWT} & \textbf{Swing} & \textbf{LCDUI} &
 \textbf{LWUIT}\\\hline\hline
\textbf{Tamany} & SI & SI & SI & NO & SI\\\hline
\textbf{Foreground} & SI & SI & SI & NO & SI\\\hline
\textbf{Background} & SI & SI & SI & NO & SI\\\hline
\textbf{Font} & SI & SI & SI & NO & SI\\\hline
\hline
\end{tabular}

\subsection{Botó}
Un element que conté, com a mínim, un text i és capaç de rebre una acció
concreta (la de ésser pitjat).\\

\textbf{Widgets candidats:}\\

\begin{tabular}{|l|r|}
\hline
SWT & Button\\\hline
AWT & Button\\\hline
Swing & JButton\\\hline
LCDUI & (No suportat)\\\hline
LWUIT & Button\\\hline
\end{tabular}
\\
\\
\textbf{Suport a les llibreries:}\\

\begin{tabular}{|l||c|c|c|c|r|}
\hline
 & \textbf{AWT} & \textbf{SWT} & \textbf{Swing} & \textbf{LCDUI} &
 \textbf{LWUIT}\\ \hline\hline
 \textbf{Tamany} & SI & SI & SI & - & SI\\\hline
\textbf{Foreground} & SI & SI & SI & - & SI\\\hline
\textbf{Background} & SI & SI & SI & - & SI\\\hline
\textbf{Font} & SI & SI & SI & - & SI\\\hline
\hline
\end{tabular}

\subsection{Llista}
Un element que presenta a la pantalla una llista d'elements de text. Els
elements poden ser de tipus més complexos en algunes llibreries, però en
aquesta prova només es demana que puguin mostrar text.\\

\textbf{Widgets
candidats:}\\

\begin{tabular}{|l|r|}
\hline
SWT & List\\\hline
AWT & List\\\hline
Swing & JList\\\hline
LCDUI & List\\\hline
LWUIT & List\\\hline
\end{tabular}
\\
\\
\textbf{Suport a les llibreries:}\\

\begin{tabular}{|l||c|c|c|c|r|}
\hline
 & \textbf{AWT} & \textbf{SWT} & \textbf{Swing} & \textbf{LCDUI} &
 \textbf{LWUIT}\\ \hline\hline
 \textbf{Tamany} & SI & SI & SI & NO & SI\\\hline
\textbf{Foreground} & SI & SI & SI & NO & SI\\\hline
\textbf{Background} & SI & SI & SI & NO & SI\\\hline
\textbf{Font} & SI & SI & SI & NO & SI\\\hline
\hline
\end{tabular}

\subsection{Arbre}
Un element capaç de mostrar elements de text degudament ordenats en una
estructura arborescent. Aquest elements poden ser més complexos o no, segons la
llibreria gràfica.\\

\textbf{Widgets candidats:}\\

\begin{tabular}{|l|r|}
\hline
SWT & Tree (TreeItem)\\\hline
AWT & List\\\hline
Swing & JTree (TreeNode)\\\hline
LCDUI & (No suportat)\\\hline
LWUIT & (No suportat)\\\hline
\end{tabular}
\\
\\
\textbf{Suport a les llibreries:}\\

\begin{tabular}{|l||c|c|c|c|r|}
\hline
 & \textbf{AWT} & \textbf{SWT} & \textbf{Swing} & \textbf{LCDUI} &
 \textbf{LWUIT}\\ \hline\hline
 \textbf{Tamany} & SI & SI & SI & - & -\\\hline
\textbf{Foreground} & SI & SI & SI & - & -\\\hline
\textbf{Background} & SI & SI & SI & - & -\\\hline
\textbf{Font} & SI & SI & SI & - & -\\\hline
\hline
\end{tabular}

\subsection{Entrada de texte}
Un element que permet rebre text per part de l'usuari. Aquest element ha de
poder rebre el focus del teclat del sistema.\\

\textbf{Widgets candidats:}\\

\begin{tabular}{|l|r|}
\hline
SWT & Text\\\hline
AWT & TextField\\\hline
Swing & JTextField\\\hline
LCDUI & TextField\\\hline
LWUIT & TextField\\\hline
\end{tabular}
\\
\\
\textbf{Suport a les llibreries:}\\

\begin{tabular}{|l||c|c|c|c|r|}
\hline
 & \textbf{AWT} & \textbf{SWT} & \textbf{Swing} & \textbf{LCDUI} &
 \textbf{LWUIT}\\ \hline\hline
 \textbf{Tamany} & SI & SI & SI & NO & SI\\\hline
\textbf{Foreground} & SI & SI & SI & NO & SI\\\hline
\textbf{Background} & SI & SI & SI & NO & SI\\\hline
\textbf{Font} & SI & SI & SI & NO & SI\\\hline
\hline
\end{tabular}